<template>
  <div class="base-course-container">
    <div class="box">
      <div v-for="(obj,i) in courseList" :key="obj.courseId" class="c">

        <CoursePreview :course="obj"></CoursePreview>

      </div>
    </div>
  </div>
</template>

<script>
import CoursePreview from "@/components/course/CoursePreview";

export default {
  //组件名称
  name: "BaseCourse",
  props: [],
  //组件注册
  components: {CoursePreview},
  //数据驱动
  data() {
    return {
      courseList: []
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //查询基本课程列表
    selectBaseCourseList() {
      this.axios.get("/course/web/base")
          .then((data) => {
            this.courseList = data.data;
          })
    }
  },
  //钩子函数
  created() {
    this.selectBaseCourseList()
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.base-course-container {
  min-width: 1200px;
  width: 80%;
  margin: 0px auto;
  padding-bottom: 15px;
  border-radius: 6px;
  //background-color: #fa2557;
  box-shadow: 1px 1px 4px 2px #f69e9e;
  .box {
    display: flex;
    flex-wrap: wrap;
    //justify-content: space-between;

    .c {
      width: 20%;
      margin-top: 15px;
    }
  }
}
</style>